<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card" v-loading="loading">
        <!-- 用了一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <treeVueVue
            :nodedata="company"
            :isroot="false"
            @opendialogVisible="opendialogVisible"
            @aditdialogVisible="aditdialogVisible"
          />
        </el-row>
        <el-row>
          <el-col>
            <el-tree
              :data="departs"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
              <template #default="{ data }">
                <treeVueVue
                  :nodedata="data"
                  @opendialogVisible="opendialogVisible"
                  @aditdialogVisible="aditdialogVisible"
                  @getdepart="reducegetpartment"
                />
              </template>
            </el-tree>
          </el-col>
        </el-row>
      </el-card>
      <addDepartVue
        ref="adddepart"
        :addlialogdepart.sync="dialogVisible"
        :nodedata="nodedata"
        :departslist="departslist"
        @reducegetpartment="reducegetpartment"
      ></addDepartVue>
    </div>
  </div>
</template>

<script>
import treeVueVue from './compoents/treeVue.vue'

import { getdepartmentapi } from '@/api/departments'
import addDepartVue from './compoents/addDepart.vue'
import { translisttreedata } from '@/utils/index'
export default {
  components: {
    treeVueVue,
    addDepartVue
  },
  created() {
    this.reducegetpartment()
  },
  data() {
    return {
      loading: false,
      departs: [], // 树状列表
      departslist: [], // 原始列表数据
      // 改变树形结构的键
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      company: {
        name: '',
        manager: '管理员',
        id: ''
      },
      dialogVisible: false,
      nodedata: {} // 当前部门
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },

    // // 对接口返回的列表进行二级加工
    // translisttreedata(data, value) {
    //   const arr = []
    //   data.forEach((item) => {
    //     if (item.pid === value) {
    //       const children = this.translisttreedata(data, item.id)

    //       if (children.length > 0) {
    //         item.children = children
    //       }

    //       arr.push(item)
    //     }
    //   })
    //   return arr
    // },
    // 打开碳层
    opendialogVisible(nodedata) {
      this.dialogVisible = true
      this.nodedata = nodedata
      // 打开碳层，请求负责人列表
      this.$nextTick(() => {
        this.$refs.adddepart.getleaderfn()
      })

      // // 打开碳层，请求部门列表
      // this.$nextTick(() => {
      //   this.$refs.adddepart.getpartment()
      // })
    },
    aditdialogVisible(nodedata) {
      this.dialogVisible = true
      this.nodedata = nodedata

      // 打开碳层，请求负责人列表
      this.$nextTick(() => {
        this.$refs.adddepart.getleaderfn()
      })
      // 打开碳层，请求部门列表
      this.$nextTick(() => {
        this.$refs.adddepart.getpartment()
      })
    },
    // // 关闭碳层
    // closedilog() {
    //   this.dialogVisible = false
    // },
    // 重新请求部门列表数据
    async reducegetpartment() {
      this.loading = true
      const { data } = await getdepartmentapi()
      // 调用方法，接收处理好的数据
      const deptslist = translisttreedata(data.depts, '')
      this.departs = deptslist
      this.company.name = data.companyName
      this.departslist = data.depts
      this.loading = false
    }
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
